<template>
	<div>
		<Header is-scrolled="false" :message="contentdata" />
		<!--==========================
            Intro Section
            ============================-->
		<section id="intro">
			<div class="intro-container">
				<el-carousel height="100vh" :interval="3000" arrow="always">
					<el-carousel-item v-for="(banner, index) in siteConfig.banners" :key="index">
						<el-image :src="banner.bannerImg" style="width: 100%;height: 120%;" fit="cover">
						</el-image>
						<!-- style="height: 500px; width: 600px; position: relative; align-items: center;" -->
						<!-- 	<div class="carousel-container">
							<div class="carousel-content">
								<h2 v-html="banner.mainTitle"></h2>
								<p v-html="banner.subTitle"></p>
								<a href="./index.html" class="btn-get-started scrollto">Get Started</a>
							</div>
						</div> -->
					</el-carousel-item>
				</el-carousel>
			</div>
		</section>


		<main id="main">
			<!--==========================
                作品模块 Section
            ============================-->
			<section id="portfolio" class="section-bg">
				<div class="container">

					<header class="section-header">
						<h3 class="section-title">product</h3>
					</header>

					<div class="row">
						<div class="col-lg-12">
							<ul id="portfolio-flters">
								<li v-for="(pocs, index) in pocsArr" v-on:click="clickPocs(pocs.id)"
									:class="curClickPocs == pocs.id ? 'filter-active' : ''" v-html="pocs.pocsName">All
								</li>
								<!-- 	<li>Web</li>
								<li>App</li>
								<li>硬件</li> -->
							</ul>
						</div>
						<!-- <div class="achievementSelBox">
							<el-select v-model="searchAchievementYear" placeholder="请选择年份" size="mini"
								@change="changeAchievementSearchYear" :popper-append-to-body="false"
								style="width: 60%;">
								<el-option v-for="item in achievementYearOptions" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div> -->
					</div>

					<div class="row portfolio-container" style="display: flex;flex-wrap: wrap;">
						<div v-for="(achievement, index) in showAchievementArr" :key="index"
							class="newcss col-md-6 portfolio-item filter-web wow fadeInUp" data-wow-delay="0.2s"
							@click="lookdetail(achievement)">
							<a href="javascript:void(0)">
							<div class="portfolio-wrap" style="position: relative;">
								<figure>
									<img :src="achievement.previewImg" class="img-fluid" alt="">
									<!-- 	<a :href="achievement.previewImg" class="link-preview" data-lightbox="portfolio"
										:data-title="achievement.title" title="Preview"><i class="ion ion-eye"></i></a>
									<a href="#" class="link-details" title="More Details"><i
											class="ion ion-android-open"></i></a> -->
								</figure>
								<!-- <div :class="achievement.partUserNames.includes(',') ? 'teamTagBox' : 'ownTagBox'"
									v-html="achievement.partUserNames.includes(',') ? 'team' : 'individual'">individual</div> -->
								<div class="portfolio-info">
									<h4>{{achievement.title}}</h4>
									<!-- <p style="font-size: 12px;font-weight: lighter;color: black;"
										v-html="achievement.description"></p> -->
									<!-- <span style="font-size: 12px;">Participant Member：<span
											v-html="achievement.partUserNames"></span></span> -->
								</div>
							</div>
							</a>
						</div>

						<div class="allbox" v-if="showAchievementArr.length>3">
						<!-- {{showAchievementArr.length}} -->
							<div class="all" @click="lookall" v-if="showAchievementArr.length==4">
								全部展开<i class="el-icon-arrow-down"></i>
							</div>



							<div class="all" @click="ycall" v-else>
								收起<i class="el-icon-arrow-up"></i>
							</div>
						</div>
					</div>

				</div>
			</section><!-- #portfolio -->
			<!--==========================
                About Us Section
            ============================-->
			<!-- :style="'background: url(http://43.162.109.144/studio/static/923d68b6-41eb-405c-a84d-72f7af5ec125.jpg) center center no-repeat;'" -->
			<div class="title-bg"
				:style="{ background: 'url(' + contentdata.firstScreen.mainImg + ') center center no-repeat' }">

				<!-- <div class="main-container">
					<div class="title">
						<p>
							{{contentdata.firstScreen.mainTitle}}
							<em>Manufacturing Company</em>
						</p>
						<span>{{contentdata.firstScreen.text}}</span>
					</div>
				</div> -->
			</div>
			<section id="about">
				<div class="container">

					<header class="section-header">
						<h3>{{contentdata.firstScreen.mainTitle}}</h3>
						<p style="white-space: pre-wrap;" v-html="contentdata.firstScreen.text"></p>
					</header>

					<div class="row about-cols">

						<div class="col-md-4 wow fadeInUp" v-for="(item,index) in contentdata.secondScreen"
							:key="index">
							<div class="about-col">
								<div class="img">
									<img :src="item.mainImg" alt="" class="img-fluid">
									<div class="icon"><i :class="item.icon"></i></div>
								</div>
								<h2 class="title"><a href="#">{{item.mainTitle}}</a></h2>
								<p v-html="item.text">
								</p>
							</div>
						</div>
						<!-- 	<div class="col-md-4 wow fadeInUp">
							<div class="about-col">
								<div class="img">
									<img :src="contentdata.secondScreen[0].mainImg" alt="" class="img-fluid">
									<div class="icon"><i class="ion-ios-speedometer-outline"></i></div>
								</div>
								<h2 class="title"><a href="#">{{contentdata.secondScreen[1].mainTitle}}</a></h2>
								<p v-html="contentdata.secondScreen[1].text">
								</p>
							</div>
						</div>
						
						<div class="col-md-4 wow fadeInUp">
							<div class="about-col">
								<div class="img">
									<img :src="contentdata.secondScreen[2].mainImg" alt="" class="img-fluid">
									<div class="icon"><i class="ion-ios-speedometer-outline"></i></div>
								</div>
								<h2 class="title"><a href="#">{{contentdata.secondScreen[2].mainTitle}}</a></h2>
								<p v-html="contentdata.secondScreen[2].text">
								</p>
							</div>
						</div>
						
						<div class="col-md-4 wow fadeInUp">
							<div class="about-col">
								<div class="img">
									<img :src="contentdata.secondScreen[3].mainImg" alt="" class="img-fluid">
									<div class="icon"><i class="ion-ios-speedometer-outline"></i></div>
								</div>
								<h2 class="title"><a href="#">{{contentdata.secondScreen[3].mainTitle}}</a></h2>
								<p v-html="contentdata.secondScreen[3].text">
								</p>
							</div>
						</div>
						
						<div class="col-md-4 wow fadeInUp">
							<div class="about-col">
								<div class="img">
									<img :src="contentdata.secondScreen[4].mainImg" alt="" class="img-fluid">
									<div class="icon"><i class="ion-ios-speedometer-outline"></i></div>
								</div>
								<h2 class="title"><a href="#">{{contentdata.secondScreen[4].mainTitle}}</a></h2>
								<p v-html="contentdata.secondScreen[4].text">
								</p>
							</div>
						</div> -->


						<!-- <div class="col-md-4 wow fadeInUp" data-wow-delay="0.1s">
							<div class="about-col">
								<div class="img">
									<img src="@/assets/image/about-plan.jpg" alt="" class="img-fluid">
									<div class="icon"><i class="ion-ios-list-outline"></i></div>
								</div>
								<h2 class="title"><a href="#">Rigorous installation service</a></h2>
								<p v-html="siteConfig.teamPlan">
								</p>
							</div>
						</div>

						<div class="col-md-4 wow fadeInUp" data-wow-delay="0.2s">
							<div class="about-col">
								<div class="img">
									<img src="@/assets/image/about-vision.jpg" alt="" class="img-fluid">
									<div class="icon"><i class="ion-ios-eye-outline"></i></div>
								</div>
								<h2 class="title"><a href="#">quality assurance</a></h2>
								<p v-html="siteConfig.teamVision">
								</p>
							</div>
						</div>
						<div class="col-md-4 wow fadeInUp" data-wow-delay="0.2s">
							<div class="about-col">
								<div class="img">
									<img src="@/assets/image/about-vision.jpg" alt="" class="img-fluid">
									<div class="icon"><i class="ion-android-folder"></i></div>
								</div>
								<h2 class="title"><a href="#">Strength Guarantee</a></h2>
								<p v-html="siteConfig.teamVision">
								</p>
							</div>
						</div>
						<div class="col-md-4 wow fadeInUp" data-wow-delay="0.2s">
							<div class="about-col">
								<div class="img">
									<img src="@/assets/image/about-vision.jpg" alt="" class="img-fluid">
									<div class="icon"><i class="ion-android-favorite"></i></div>
								</div>
								<h2 class="title"><a href="#">Rich industry experience</a></h2>
								<p v-html="siteConfig.teamVision">
								</p>
							</div>
						</div> -->

					</div>

				</div>
			</section><!-- #about -->
			<!-- style=" background: url(http://43.162.109.144/studio/static/94de3be1-5973-4df4-8f53-38c003381aa3.jpg) top center no-repeat;" -->
			<div class="about-wrap" id="abouts"
				:style="{ background: 'url(' + contentdata.thirdScreen.bgImg + ') top center no-repeat' }">
				<div class="full-main about-bg">
					<div class="main-container">
						<div class="about-text">
							<div class="title">
								<span>{{contentdata.thirdScreen.mainTitle}}</span>
								<!-- 	<a href="">
									<p>ABOUT<em>HUAYI</em></p>
								</a> -->
							</div>
							<!-- <strong>Wuhu Huayi Valve Manufacturing Co., Ltd</strong> -->
							<!-- <strong>{{contentdata.thirdScreen.mainTitle}}</strong> -->
							<p></p>
							<p style="color: #ffffff;">
								<!-- Wuhu Huayi Valve Group Co., Ltd. is located in Wuhu City, a famous commercial
								distribution center in Anhui Province, adjacent to the famous Mount Huangshan Mountain
								and Jiuhua Mountain, a Buddhist holy land. We are a high-tech enterprise specializing in
								the research, development, production, and sales of international and domestic standard
								valves and fittings, with self operated import and export rights. The company has strong
								technical strength and has subsidiaries including Wuhu Huayi Valve Manufacturing Co.,
								Ltd., Wuhu Huayi Pipeline System Engineering Co., Ltd., Wuhu Aiweier Valve and Pipe
								Fitting Co., Ltd., and Hanshan Huayi Valve and Pipe Fitting Manufacturing Co., Ltd. It
								also has a valve research center and a mechanical processing center··· -->
								{{contentdata.thirdScreen.text}}
							</p>
						</div>
						<div class="about-img">
							<div class="img">
								<img :src="contentdata.thirdScreen.mainImg" alt="" />
							</div>
						</div>
					</div>
				</div>


			</div>

			<!--==========================
                技术栈模块
            ============================-->
			<!-- <section id="skills">
				<div class="container">

					<header class="section-header">
						<h3>技术栈</h3>
						<p>团队成员掌握的技术能力</p>
					</header>

					<div class="skills-content">
						<div class="progressBox" v-for="(skill, index) in skillConfig" :key="index">
							<el-progress :text-inside="true" :stroke-width="40" :percentage="skill.skillPercentage"
								:color="customColors" />
							<span v-html="skill.skillName">物联网</span>
						</div>
						<div class="progressBox">
                        <el-progress  :text-inside="true" :stroke-width="40" :percentage="80" status="warning"/>
                        <span >后端</span>
                    </div>
                    <div class="progressBox">
                        <el-progress  :text-inside="true" :stroke-width="40" :percentage="70" status="exception"/>
                        <span >Web前端</span>
                    </div>
                    <div class="progressBox">
                        <el-progress  :text-inside="true" :stroke-width="40" :percentage="50" status="exception"/>
                        <span >平面设计</span>
                    </div>
					</div>

				</div>
			</section> -->

			<!--==========================
                数据模块
            ============================-->
			<!-- <section id="facts" class="wow fadeIn">
				<div class="container">
					<header class="section-header">
						<h3>数据</h3>
						<p>我们的队伍在不断壮大，期待你在工作室放光放彩</p>
					</header>

					<div class="row counters" style="margin-bottom: 120px;">
						<div class="col-lg-3 col-6 text-center">
							<span data-toggle="counter-up" v-html="statisticsData.establishmentDaysNum">1,364</span>
							<p>成立天数</p>
						</div>

						<div class="col-lg-2 col-6 text-center">
							<span data-toggle="counter-up" v-html="statisticsData.teamMembersNum">18</span>
							<p>团队成员</p>
						</div>

						<div class="col-lg-2 col-6 text-center">
							<span data-toggle="counter-up" v-html="statisticsData.racesNum">4</span>
							<p>参与竞赛</p>
						</div>

						<div class="col-lg-2 col-6 text-center">
							<span data-toggle="counter-up" v-html="statisticsData.achievementsNum">10</span>
							<p>获取成果</p>
						</div>

						<div class="col-lg-3 col-6 text-center">
							<span data-toggle="counter-up" v-html="statisticsData.cciesNum">4</span>
							<p>奖项证书</p>
						</div>
					</div>
				</div>
			</section> -->



			<!-- 荣誉 -->
			<section id="honer" class="section-bg">
				<div class="container" style="max-width: 1250px !important;">
					<div class="section-header wow fadeInUp">
						<h3>Qualifications and Honors</h3>
					</div>

					<div style="width: 600px; position: relative;left: 25%;">
						<el-tabs v-model="activeName" :stretch="stretch" @tab-click="handleClickHonerTabs">
							<el-tab-pane label="certificate" name="first"></el-tab-pane>
							<!-- 		<el-tab-pane label="patent" name="second"></el-tab-pane>
							<el-tab-pane label="paper" name="three"></el-tab-pane>
							<el-tab-pane label="Software Copyright" name="four"></el-tab-pane> -->
						</el-tabs>
						<!-- <div class="honerSelBox">
							<el-select v-model="searchHonerYear" placeholder="请选择年份" size="mini"
								@change="changeHonerSearchYear" :popper-append-to-body="false" style="width: 20%;">
								<el-option v-for="item in honerYearOptions" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div> -->
					</div>


					<div v-if="activeName === 'first'" class="row honer-imgs"
						style="margin-top: 30px;display: flex;flex-wrap: wrap; position: relative; left: 2%;">
						<div class="imgbox wow fadeInUp" v-for="(showRace, index) in showRaceArr" :key="index">
							<div class="honerDate" v-html="showRace.raceEndTime">2024年7月</div>
							<!-- 	<div :class="showRace.raceFlag == '1' ? 'honerOwnTag' : 'honerTeamTag'"
								v-html="showRace.raceFlag == '1' ? 'individual' : 'team'">个人</div> -->
							<img class="honerImg" v-on:click="clickPreviewImg(showRace.raceCcie)"
								:src="showRace.raceCcie" alt="">
							<div class="honerType" v-html="showRace.raceName">xxxxx个人竞赛</div>
							<!-- <div class="honerDesc" v-html="showRace.teamMemberRealNames">获得者：xxxxxx</div> -->
						</div>

						<!-- <div class="imgbox wow fadeInUp" v-for="index in [1,2,3,4,5]">
                            <div class="honerDate">2024年7月</div>
                            <div class="honerTeamTag">团队</div>
                            <img class="honerImg" src="@/assets/image/patents/patents.png" alt="">
                            <div class="honerType" >xxxxxx团队竞赛</div>
                            <div class="honerDesc" >获得者：xxxxx</div>
                        </div> -->
					</div>
					<div v-if="activeName === 'second' || activeName === 'three' || activeName === 'four'"
						class="row honer-imgs"
						style="margin-top: 30px;display: flex;flex-wrap: wrap; position: relative; left: 2%;">
						<div class="imgbox wow fadeInUp" v-for="(showCcie, index) in showCcieArr" :key="index">
							<div class="honerDate" v-html="showCcie.ccieGetTime">2024年7月</div>
							<div :class="showCcie.tagClass" v-html="showCcie.tagName">个人</div>
							<img class="honerImg" v-on:click="clickPreviewImg(showCcie.ccieImg)" :src="showCcie.ccieImg"
								alt=""></img>
							<div class="honerType" v-html="showCcie.ccieName">个人竞赛</div>
							<!-- <div class="honerDesc" v-html="'发表人：' + showCcie.userName">xxxxxxxxxxx个人竞赛</div> -->
						</div>
					</div>
				</div>
				<el-image ref="elImage" style="width: 0; height: 0;" :src="bigImageUrl"
					:preview-src-list="logicImageList"></el-image>
			</section><!-- #contact -->

			<!--==========================
                Contact Section
            ============================-->
			<section id="contact" class="section-bg wow fadeInUp">
				<div class="container">

					<div class="section-header">
						<h3>Contact Us</h3>
						<!-- <p>如果你有追求技术的一颗心，快来加入我们吧</p> -->
					</div>

					<div class="form" style="width: 70%;margin: 0 auto;">
						<div id="sendmessage">Your message has been sent. Thank you!</div>
						<div id="errormessage"></div>
						<el-form ref="form" :model="userform" >
							
							<div class="formbox" style="display: flex;justify-content: space-between;">
								<el-form-item style="width: 48%;">
								   <el-input v-model="userform.name" placeholder="name" ></el-input>
								 </el-form-item > 
								<el-form-item style="width: 48%;">
								  <el-input v-model="userform.email" placeholder="email"></el-input>
								</el-form-item>
							</div>
						
						<el-form-item>
						  <el-input v-model="userform.project" placeholder="project"></el-input>
						</el-form-item>
						  <el-form-item>
						    <el-input type="textarea" v-model="userform.description" placeholder="description"></el-input>
						  </el-form-item>
						  <el-form-item style="display: flex;justify-content: center;">
						    <el-button type="primary" @click.once="submitUser" style="background-color: #055aae;border-color: #055aae;">SUBMIT</el-button>
						  </el-form-item>
						</el-form>
						<!-- <form action="" method="post" role="form" class="contactForm">
							<div class="form-row">
								<div class="form-group col-md-6">
									<input type="text" v-model="userdata.name" name="name" class="form-control" id="name" placeholder="name"
										data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
									<div class="validation"></div>
								</div>
								<div class="form-group col-md-6">
									<input type="email" class="form-control" name="email" id="email" placeholder="email"
										data-rule="email" data-msg="Please enter a valid email" />
									<div class="validation"></div>
								</div>
							</div>
							<div class="form-group">
								<input type="text" class="form-control" name="subject" id="subject" placeholder="project"
									data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
								<div class="validation"></div>
							</div>
							<div class="form-group">
								<textarea class="form-control" name="message" rows="5" data-rule="required"
									data-msg="Please write something for us" placeholder="description"></textarea>
								<div class="validation"></div>
							</div>
							<div class="text-center"><button type="button" @click="submitUser">保存</button></div>
						</form> -->
					</div>

				</div>
			</section>
			
		<!-- 	<section id="contact" class="section-bg wow fadeInUp">
				<div class="container">
			
					<div class="section-header">
						<h3>新闻</h3>
					</div>
					<div class="xwcontent">
						<div class="xwlist" @click="lookxw">
							<a href="javascript:void(0)">
								新闻1
							</a>
						</div>
						<div class="xwlist">
							<a href="javascript:void(0)">
								新闻2
							</a>
						</div>
					</div>
			
				</div>
			</section> -->
			<!-- #contact -->
		</main>
		<Footer :message="contentdata" />
		<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>


		<el-dialog :title="detail.title" :visible.sync="dialogVisible" center="" width="50%"
			>
			<div class="detailbox">

				<img :src="detail.previewImg" alt="" />
				<div class="items">
					<div class="l"></div>
					<div class="r" v-html="detail.description"></div>
				</div>
			</div>
		</el-dialog>
		
		
		
		
		<el-dialog title="新闻1" :visible.sync="xwshow" center="" width="50%"
			>
			<div class="detailbox">
		
				<img src="http://43.162.109.144/studio/static/8227528f-cd6e-4b9e-9132-cbe23a620516.png" alt="" />
				<div class="items">
					<div class="l"></div>
					<div class="r" >新闻1</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import Header from '../components/Header.vue';
	import Footer from '../components/Footer.vue';
	import {
		showAchievements
	} from '@/api/openAchievementApi.js'
	import {
		pocsList
	} from '@/api/openPocsApi.js'
	import {
		ccieList
	} from '@/api/openCcieApi.js'
	import {
		raceList
	} from '@/api/openRaceApi.js'
	import {
		getSiteStatistics
	} from '@/api/openSiteApi.js'
	import {
		querySiteConfig,
		contact
	} from '@/api/openSiteApi.js'
	export default {
		name: 'Index',
		components: {
			Header,
			Footer
		},
		data() {
			return {
				userform: {
				          name: '',
							email:'',
							project:"",
							description:""
				        },
				userdata:{
					name:""
				},
				xwshow:false,
				detail: {},
				dialogVisible: false,
				detailTitle: '',
				iconlist: ['ion-ios-speedometer-outline', 'ion-ios-list-outline', 'ion-ios-eye-outline',
					'ion-android-folder', 'ion-android-favorite', 'ion-ios-star-outline', 'ion-ios-sunny',
					'ion-ios-telephone', 'ion-ios-tennisball', 'ion-ios-time', 'ion-ios-trash', 'ion-ios-undo',
					'ion-ios-volume-high', 'ion-ios-wineglass-outline'
				],
				contentdata: {},
				// 全局动态配置
				// 创建团队时间
				createTeamYear: this.$store.state.site.siteCreateTime !== '' ? this.$store.state.site.siteCreateTime
					.substring(0, 4) : 2001,
				// 动态配置
				activeName: 'first',
				stretch: true,
				curClickPocs: 1, // 当前选中的栏目
				// 网站主页配置查询条件
				siteConfigParms: {
					configKey: this.$MY_CONSTANT.SITE_CONFIG.SITE_PAGE_MAIN_CONFIG.configKey
				},
				// 网站主页技术栈查询条件查询参数
				siteSkillConfigParams: {
					configKey: this.$MY_CONSTANT.SITE_CONFIG.SITE_PAGE_SKILL_CONFIG.configKey
				},
				// 网站主页基础配置
				siteConfig: {
					banners: [
						// {
						// 	"bannerImg": "https://pictured-bed.oss-cn-beijing.aliyuncs.com/img/2024/071.png",
						// 	"mainTitle": "欢迎来到汉科国际外贸网站",
						// 	"subTitle": "一群志同道合的人，一起奔跑在理想的路上..."
						// },
						// {
						// 	"bannerImg": "https://pictured-bed.oss-cn-beijing.aliyuncs.com/img/2024/072.png",
						// 	"mainTitle": "关于我们",
						// 	"subTitle": "最好的团队，最好的我们，不负韶华，努力奋斗。"
						// },
						// {
						// 	"bannerImg": "https://pictured-bed.oss-cn-beijing.aliyuncs.com/img/2024/073.png",
						// 	"mainTitle": "时光轴",
						// 	"subTitle": "时间是温柔的羽毛，把过往的灰尘轻轻弹去。"
						// },
						// {
						// 	"bannerImg": "https://pictured-bed.oss-cn-beijing.aliyuncs.com/img/2024/074.png",
						// 	"mainTitle": "团队",
						// 	"subTitle": "拍照只需要三秒，可锁住的是我们三年青春，感谢遇见！"
						// }
					],
					teamDescription: '这里是物联网工作室，在这里不仅有学习硬件，还有学习软件的小伙伴们，我们都在前进的路上，未来值得期待！\n工作室有着丰富的学习资源，有着可以帮助你解决问题的学长学姐们以及专业指导老师，让你不断在专业领域进行探索和挖掘知识宝藏。\n',
					teamMission: '把我们的努力和知识，化身成有价值的产品，在未来物联网领域开拓出一片新的天地.',
					teamPlan: '多方位的扩展技术方面的人才，将想法进行落实.',
					teamVision: '期望所有的成员能够学有所成，在各自的领域发光发亮，取得优秀的成绩.'
				},
				// 技术栈配置
				skillConfig: [{
						skillName: 'Java',
						skillPercentage: 10
					},
					{
						skillName: '网站开发',
						skillPercentage: 10
					},
					{
						skillName: '上位机',
						skillPercentage: 10
					},
					{
						skillName: 'openCV',
						skillPercentage: 10
					},
				],
				// 自定义进度条颜色
				customColors: [{
						color: '#f56c6c',
						percentage: 20
					},
					{
						color: '#e6a23c',
						percentage: 40
					},
					{
						color: '#5cb87a',
						percentage: 60
					},
					{
						color: '#1989fa',
						percentage: 80
					},
					{
						color: '#6f7ad3',
						percentage: 100
					}
				],
				// 展示成果数组
				showAchievementArr: [],
				// 成果分类列表
				pocsArr: [{
						"id": 0,
						"pocsName": "闸阀"
					},
					{
						"id": 2,
						"pocsName": "截止阀"
					},
					{
						"id": 3,
						"pocsName": "止回阀"
					},
					{
						"id": 4,
						"pocsName": "过滤器"
					},
					{
						"id": 5,
						"pocsName": "其他阀门和配件"
					},
					{
						"id": 6,
						"pocsName": "空气阀"
					},
					{
						"id": 7,
						"pocsName": "消防栓"
					},
					{
						"id": 8,
						"pocsName": "蝶阀"
					},
					{
						"id": 9,
						"pocsName": "球阀"
					}
				],
				// 展示证书列表
				showCcieArr: [],
				// 展示竞赛列表
				showRaceArr: [],
				// 网站统计数据
				statisticsData: {},
				// 预览图片
				bigImageUrl: '',
				logicImageList: [],
				// 成果年份下拉选项
				achievementYearOptions: [],
				// 成果年份查询
				searchAchievementYear: '',
				// 荣誉资质年份下拉选项
				honerYearOptions: [],
				// 荣誉资质年份查询
				searchHonerYear: '',
				alldata: [],
				oldata: []
			}
		},
		created() {
			this.init()
			// console.log("index")
		},
		methods: {
			lookxw(){
				this.xwshow = true
			},
			lookdetail(detail) {
				let text = detail.description;
				if (text) {
					let replacedText = text.replace(/\n/g, "<br>");
					console.log(replacedText);
					detail.description = replacedText
				}

				console.log(detail)
				this.detail = detail

				this.dialogVisible = true

			},
			init() {
				window.curPage = 'index'
				// 获取网站主页配置信息
				this.$getSiteConfig(this.siteConfigParms).then(configValue => {
					console.log(configValue, 'configValue')
					this.siteConfig.banners = configValue.bannerTableData
					this.siteConfig.teamDescription = configValue.teamDescription.replace(/\n/g, '<br />')
					this.siteConfig.teamMission = configValue.teamMission.replace(/\n/g, '<br />')
					this.siteConfig.teamPlan = configValue.teamPlan.replace(/\n/g, '<br />')
					this.siteConfig.teamVision = configValue.teamVision.replace(/\n/g, '<br />')
				});
				querySiteConfig({
					configKey: "site.page.contentConfig"
				}).then(configValue => {
					console.log(configValue, 'configValue111')
					if (configValue.code == 200) {
						this.contentdata = configValue.data.configValue
						this.contentdata.secondScreen.forEach((item, index) => {
							item.icon = this.iconlist[index]
						})
						console.log(this.contentdata, 'configValue111')
					}
				});

				// console.log("this.$MY_CONSTANT => ", this.$MY_CONSTANT.SITE_CONFIG.SITE_PAGE_SKILL_CONFIG.configKey)
				// 获取网站技术栈信息
				this.$getSiteConfig(this.siteSkillConfigParams).then(configValue => {
					// console.log("this.siteSkillConfigParams => ", configValue)
					this.skillConfig = configValue
				});
				// 获取成果分类信息
				pocsList().then((data) => {
					// console.log("pocsList=>", data.data)
					this.pocsArr = data.data
					// this.pocsArr.unshift({
					// 	id: 0,
					// 	pocsName: 'ALL'
					// })
				}).catch(err => console.log(err))
				// 获取成果信息
				this.getShowAchievements()
				// 获取竞赛信息
				this.getShowRaces()
				// 获取竞赛证书列表信息
				// this.getShowCcies();
				this.querySiteStatistics();
				// 构造下拉年份选择器
				let createYear = this.createTeamYear
				// console.log("createYear=>", createYear)
				// console.log(this.$store.state.site.siteCreateTime)
				if (createYear) {
					let currentYear = new Date().getFullYear();
					let initAllOption = {
						label: "全部年份",
						value: ""
					}
					this.honerYearOptions.push(initAllOption)
					this.achievementYearOptions.push(initAllOption)
					for (let year = currentYear; year >= parseInt(createYear); year--) {
						let option = {
							label: year + "年",
							value: year
						}
						this.honerYearOptions.push(option)
						this.achievementYearOptions.push(option)
					}
				}
				// console.log('createYear=>', createYear)
				// console.log("STUDIO_ADMIN=>", import.meta.env)
			},
			submitUser(){
				
				contact(this.userform).then((data)=>{
					console.log(data)
					if(data.code==200){
						  // this.$message({
						  //         message: 'Successfully submitted!',
						  //         type: 'success'
						  //       });
						  
						   this.$alert('Please wait for our contact!', 'Submission successful!', {
						            confirmButtonText: 'confirm',
									center:true,
						            callback: action => {
						    //           this.$message({
						    //             type: 'info',
						    //             message: `action: ${ action }`
										
						    //           });
						            }
						          });
						  // this.$message('Successfully submitted!');
					}
				})
			},
			// 获取成果信息
			getShowAchievements() {
				// 构建请求对象
				let achievementParams = {
					pocsId: 1
				}
				if (this.curClickPocs != 0) {
					achievementParams = {
						pocsId: this.curClickPocs
					}
				}
				// 添加年份搜索
				// achievementParams.searchYear = this.searchAchievementYear
				// console.log("achievementParams=>", achievementParams)
				showAchievements(achievementParams).then((data) => {
					console.log("showAchievements=>", data)
					this.alldata = data.data
					this.oldata = data.data.slice(0, 4)
					let olddata = data.data.slice(0, 4)
					this.showAchievementArr = olddata
				}).catch(err => console.log(err))
			},
			ycall() {
				this.showAchievementArr = this.oldata
			},
			lookall() {
				this.showAchievementArr = this.alldata
			},
			// 获取竞赛证书列表
			// type=1  => 专利
			// type=2  => 论文
			// type=3  => 软著
			getShowCcies(type, tagClass) {
				// 默认为1
				let typeParam = 1;
				if (type) {
					typeParam = type.val;
				}
				let ccieParams = {
					type: typeParam,
					searchYear: this.searchHonerYear
				}
				// 调用查询证书接口
				ccieList(ccieParams).then((data) => {
					// console.log("showCcieArr=>", data)
					this.showCcieArr = data.data
					// 遍历所有的数组，填充指定的样式
					if (this.showCcieArr) {
						for (let i = 0; i < this.showCcieArr.length; i++) {
							this.showCcieArr[i].tagClass = type.tagClass
							this.showCcieArr[i].tagName = type.name
						}
					}

				}).catch(err => console.log(err))
			},
			getShowRaces() {
				let queryParams = {
					searchYear: this.searchHonerYear
				}
				raceList(queryParams).then((data) => {
					// console.log("getShowRaces=>", data)
					this.showRaceArr = data.data
				}).catch(err => console.log(err))
			},
			querySiteStatistics() {
				getSiteStatistics().then((data) => {
					// console.log("getShowRaces=>", data)
					this.statisticsData = data.data
				}).catch(err => console.log(err))
			},
			handleClickHonerTabs() {
				// console.log("activeName=>", this.activeName)
				let activeName = this.activeName
				let type = {}
				let tagClass = 'honerZhuanLiTag'
				switch (activeName) {
					case 'first':
						break;
					case 'second':
						type = {
							val: 1,
							name: '专利',
							tagClass: 'honerZhuanLiTag'
						}
						break;
					case 'three':
						type = {
							val: 2,
							name: '论文',
							tagClass: 'honerLunWenTag'
						}
						break;
					case 'four':
						type = {
							val: 3,
							name: '软著',
							tagClass: 'honerRuanZhuTag'
						}
				}
				// 根据类型区分情况
				if (activeName == 'first') {
					this.getShowRaces()
				} else if (activeName == 'second' || activeName == 'three' || activeName == 'four') {
					this.getShowCcies(type, tagClass)
				}
			},
			// 点击分类标签
			clickPocs(curClickPocs) {
				console.log(curClickPocs)
				this.curClickPocs = curClickPocs
				// 获取成果信息
				this.getShowAchievements()
			},
			clickPreviewImg(image) {
				this.$nextTick(() => {
					let img = image
					this.logicImageList = [img]
					this.bigImageUrl = img
					this.$refs.elImage.clickHandler()
				})
			},
			changeHonerSearchYear() {
				// console.log(this.queryParams.searchYear)
				// this.getShowRaces()
				this.handleClickHonerTabs()
			},
			changeAchievementSearchYear() {
				this.getShowAchievements()
			}
		}
	}
</script>

<style scoped lang="scss">
	.newcss{
		        -webkit-box-flex: 0;
		        -ms-flex: 0 0 25%;
		        flex: 0 0 25%;
		        max-width: 25%;
	}
	.xwcontent{
		
		.xwlist{
			margin: 0 auto;
			width: 50%;
			padding: 5px 0;
			border-bottom: 1px solid #055aae;
			a{
				color: #000000;
			}
		}
	}
	.allbox {
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
		display: flex;
		align-items: center;
		justify-content: center;

		.all {
			width: 30%;
			text-align: center;
		}
	}


	.detailbox {
		text-align: center;

		.items {

			display: flex;
			text-align: left;

			.l {
				// width: 70px;min-height: 70px;
			}
		}

		img {
			max-width: 360px;
			height: auto;
		}
	}

	.about-wrap {
		height: 560px;
		box-sizing: border-box;
		padding-top: 70px;

		.full-main {
			width: 100%;
			min-width: 1200px;

			.main-container {
				width: 1200px;
				margin: 0 auto;
				display: flex;
				justify-content: space-around;

				.about-img .img {

					// position: absolute;
					// top: 10px;
					// left: -10px;
					// z-index: 20;
					img {
						width: 100%;
						display: block;
						height: 450px;
					}
				}

				.about-text {
					width: 540px;
					margin-right: 50px;

					.title {
						margin-bottom: 50px;

						span {
							font-size: 26px;
							font-weight: bold;
							letter-spacing: 2px;
							color: #ff0000;
							line-height: 1;
						}

						p {
							font-size: 34px;
							font-weight: bold;
							color: #ffffff;

							em {
								color: #e6212a;
							}
						}
					}

					.text-content p {
						font-size: 14px;
						color: #ffffff;
						line-height: 24px;
					}

					strong {
						font-size: 20px;
						font-weight: bold;
						color: #ffffff;
						line-height: 1;
						display: block;
						margin-bottom: 20px;
					}

					.title {
						margin-bottom: 50px;
					}
				}
			}
		}
	}

	.title-bg .title:after {
		content: '';
		display: block;
		width: 4px;
		height: 56px;
		background: #e6212a;
		position: absolute;
		left: 0;
		top: 90px;
	}

	.title-bg {
		height: 200px;

		.main-container {
			width: 1200px;
			margin: 0 auto;

			.title {
				// margin-top: 40px;
				position: relative;
				padding-left: 20px;
				padding-top: 88px;

				span {
					font-size: 12px;
					text-transform: uppercase;
					color: #ffffff;
				}

				p {
					font-size: 38px;
					color: #ffffff;
					margin-bottom: 0;
					line-height: 1;

					strong {
						font-size: 90px;
						color: #e6212a;
					}

					em {
						color: #e6212a;
					}
				}
			}
		}
	}

	%honerTagBase {
		position: absolute;
		right: 15px;
		top: 15px;
		font-size: 9px;
		padding: 2px 5px;
		border-radius: 3px;
		font-weight: 330;
	}

	::v-deep {

		// 自定义下拉选项 【搭配select标签设置:popper-append-to-body="false"】
		.el-select-dropdown__item {
			height: 28px;
			font-size: 10px;
		}
	}

	.achievementSelBox {
		position: relative;
		left: 5%;
		bottom: 35px;
	}

	.honerSelBox {
		position: relative;
		left: -37%;
		bottom: 6px
	}

	.imgbox {
		width: 210px;
		height: 280px;
		position: relative;
		background: white;
		margin-right: 40px;
		box-shadow: 0 0 1px 1px #cccccc91;
		border-radius: 3px;

		.honerDate {
			position: absolute;
			left: 15px;
			top: 15px;
			font-size: 13px;
		}

		.honerOwnTag {
			@extend %honerTagBase;
			border: 1px solid #C0A060;
			color: #000000;
			background-color: #FFD700;
		}

		.honerTeamTag {
			@extend %honerTagBase;
			border: 1px solid #CC8C00;
			color: #FFFFFF;
			background-color: #FFA500;
		}

		.honerZhuanLiTag {
			@extend %honerTagBase;
			border: 1px solid #0077CC;
			color: #FFFFFF;
			background-color: #00BFFF;
		}

		.honerLunWenTag {
			@extend %honerTagBase;
			border: 1px solid #808080;
			color: #000000;
			background-color: #A9A9A9;
		}

		.honerRuanZhuTag {
			@extend %honerTagBase;
			border: 1px solid #388E3C;
			color: #FFFFFF;
			background-color: #4CAF50;
		}

		// 原始
		.honerImg {
			width: auto;
			max-width: 80%;
			height: auto;
			max-height: 60%;
			position: absolute;
			left: 50%;
			transform: translate(-50%, -42%);
			top: 43%;
			border: 1px solid rgba(0, 0, 0, 0.126);
			border-radius: 10px;
			box-shadow: 0 4px 8px rgba(207, 243, 4, 0.1);
			transition: border-color 0.3s ease;
		}

		.honerImg:hover {
			// transition: all 0.3s;
			cursor: pointer;
			// transform: scale(1.2);
			border-color: #f13207;
			/* 鼠标悬停时改变边框颜色 */
		}

		.honerType {
			width: 200px;
			text-align: center;
			position: absolute;
			left: 5px;
			bottom: 32px;
			font-size: 13px;
			left: 50%;
			transform: translate(-50%, 0%);
			font-weight: bold;
		}

		.honerDesc {
			width: 200px;
			position: absolute;
			left: 5px;
			bottom: 10px;
			font-size: 12px;
			left: 50%;
			transform: translate(-50%, 0%);
			text-align: center;
		}
	}

	// 定义一个基础类，包含共有的样式
	%tagBoxBase {
		font-size: 12px;
		position: absolute;
		font-weight: 330;
		color: black;
		left: 4%;
		bottom: 21%;
		padding: 0px 5px;
		border-radius: 3px;
		// width: 37px;
		height: 20px;
	}

	.teamTagBox {
		@extend %tagBoxBase;
		// background-color: rgba(129, 179, 55, 0.9);
		border: 1px solid #CC8C00;
		color: #FFFFFF;
		background-color: #FFA500;
	}

	.ownTagBox {
		@extend %tagBoxBase;
		border: 1px solid #C0A060;
		color: #000000;
		background-color: #FFD700;
		// background-color: rgba(127, 131, 247, 0.9);
		// color: white;
	}

	.progressBox span {
		position: relative;
		top: -32px;
		left: 20px;
		color: white;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}
</style>